<template>
    <div class="login-container">
      <!-- 动态星空背景 -->
      <div id="particles-js" class="particles-bg"></div>
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
  
      <!-- 登录表单 -->
      <div class="login-box">
        <h1 class="title">太空机长</h1>
        <form @submit.prevent="handleLogin">
          <div class="input-group">
            <input 
              type="text" 
              v-model="form.username"
              required
              @focus="resetValidation"
            >
            <label>指挥官姓名</label>
            <span class="highlight"></span>
          </div>
  
          <div class="input-group">
            <input
              type="password"
              v-model="form.password"
              required
              @focus="resetValidation"
            >
            <label>星际密码</label>
            <span class="highlight"></span>
          </div>
          <button type="submit" class="login-btn">启动引擎</button>
          <div v-if="errorMessage" class="error-message">
            {{ errorMessage }}
          </div>
        </form>
      </div>
    </div>
  </template>

  <!-- <script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import Particles from 'particles.js'
  import router from '@/router';
  import axios from 'axios';

  function toweb(){
    router.push({ name: 'Topic' });
    setTimeout(() => {
      window.location.reload();
    }, 1000);
    
}

  
  const form = reactive({
    username: '',
    password: ''
  })
  
  const errorMessage = ref('')
  
  const handleLogin = async () => {
    
    const requestData = {
        username: form.username,
        password: form.password,
        captcha: "4",
	      sessionId: "AC944F05EFCF381B127C6D0DEEFE7A58",
    };
    
    try {
        // 发起登录请求
        const response = await axios.post('http://192.168.28.200:8001/api/users/login', requestData);
        // 根据接口响应进行处理
        if (response.data.code === "200") {
            // 登录成功，例如跳转到首页
            router.push({ name: 'Topic' });
        } else {
            errorMessage.value = response.data.msg;
        }
    } catch (error) {
        // 处理请求错误
        console.error('登录请求失败:', error);
        errorMessage.value = '登录请求失败，请检查网络或重试';
    }
};
  
  const resetValidation = () => {
    errorMessage.value = ''
  }
  
  // 初始化粒子动画
  // const initParticles = () => {
  //   window.particlesJS('particles-js', {
  //     particles: {
  //       number: {
  //         value: 100,
  //         density: {
  //           enable: true,
  //           value_area: 800
  //         }
  //       },
  //       color: {
  //         value: ['#57a0ff', '#ff47a0']
  //       },
  //       shape: {
  //         type: 'circle'
  //       },
  //       opacity: {
  //         value: 0.5,
  //         random: false
  //       },
  //       size: {
  //         value: 3,
  //         random: true
  //       },
  //       move: {
  //         enable: true,
  //         speed: 1.5,
  //         direction: 'none',
  //         random: true,
  //         straight: false,
  //         out_mode: 'out',
  //         bounce: false
  //       }
  //     },
  //     interactivity: {
  //       detect_on: 'canvas',
  //       events: {
  //         onhover: {
  //           enable: true,
  //           mode: 'repulse'
  //         }
  //       }
  //     },
  //     retina_detect: true
  //   })
  // }
  
  // onMounted(() => {
  //   initParticles()
  // })
  </script> -->
  
  <!-- 背景  -->
  <style scoped>
  .login-container {
    height: 100vh;
    background: #000;
    overflow: hidden;
    position: relative;
  }

  /* 动态粒子 */
  .particles-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  
  /* 星星背景 */
  .stars, .stars2, .stars3 {
    position: fixed;
    width: 300%;
    height: 300%;
    background: 
      radial-gradient(2px 2px at 20% 30%, #fff, rgba(0,0,0,0)),
      radial-gradient(2px 2px at 80% 70%, #fff, rgba(0,0,0,0));
    animation: moveStars 200s linear infinite;
    z-index: 1;
    pointer-events: none;
  }
  
  .stars2 {
    animation-duration: 150s;
    opacity: 0.6;
  }
  
  .stars3 {
    animation-duration: 100s;
    opacity: 0.4;
  }
  
  /* 登录框 */
  .login-box {
    position: relative;
    z-index: 2;
    width: 400px;
    padding: 40px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(87, 154, 255, 0.2);
    backdrop-filter: blur(10px);
    margin: 100px auto;
  }
  
  @keyframes moveStars {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
  }
  
  /* 字体 */
  .title {
    color: #57a0ff;
    text-align: center;
    font-size: 2.5em;
    text-shadow: 0 0 10px rgba(87, 154, 255, 0.5);
    margin-bottom: 40px;
  }
  
  /* 用户名 */
  .input-group {
    position: relative;
    margin-bottom: 30px;
  }
  
  .input-group input {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: none;
    border-bottom: 2px solid #57a0ff;
    color: #fff;
    font-size: 16px;
    transition: all 0.3s;
  }
  
  .input-group input:focus {
    outline: none;
    border-bottom-color: #ff47a0;
  }
  
  .input-group label {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #57a0ff;
    pointer-events: none;
    transition: all 0.3s;
  }
  
  .input-group input:focus ~ label,
  .input-group input:valid ~ label {
    top: -10px;
    font-size: 12px;
    color: #ff47a0;
  }
  
  
  
  .input-group input:focus ~ .highlight {
    width: 100%;
  }
  
  .login-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(45deg, #57a0ff, #ff47a0);
    border: none;
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
  }
  
  .login-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(87, 154, 255, 0.5);
  }
  
  .glow {
    position: absolute;
    background: rgba(255,255,255,0.2);
    width: 50px;
    height: 100%;
    left: -50px;
    top: 0;
    transform: skewX(-30deg);
    transition: all 0.3s;
  }
  
  .login-btn:hover .glow {
    left: 120%;
  }
  
  .error-message {
    color: #ffffff;
    text-align: center;
    margin-top: 15px;
    text-shadow: 0 0 10px rgba(255,71,71,0.3);
  }
  </style>